<template>
   <div class="selector clearfix">
                <dl class="clearfix">
                    <dt>品牌</dt>
                    <dd>
                        <div class="logo">
                            <ul>
                                <li v-for="tradem in trademarkList" :key="tradem.tmId">
                                    <a href.prevent="" @click="to_tradem(tradem.tmName,tradem.tmId)">{{tradem.tmName}}</a>
                                </li>
                            </ul>
                            <div class="logo_a">
                                <a href="">多选</a>
                                <a href="">更多</a>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="clearfix" v-for="attrs in attrsList" :key="attrs.attrId">
                    <dt>{{attrs.attrName}}</dt>
                    <dd>
                        <a href.prevent="" v-for="(value,id) in attrs.attrValueList" :key="id" @click="to_attrsList(attrs,value)">{{value}}</a>
                    </dd>
                </dl>
            </div>
</template>

<script>
export default {
    name:'Selector',
    // 接收父类传入的attrsList 与 trademarkList
    props:['attrsList','trademarkList'],
    methods: {
        // 发送点击品牌的id与name数据给父组件
        to_tradem(name,id){
            this.$emit("gettradem",name,id)
        },
        // 发送点击属性的attrsList属性与attrsList的attrValueList数据给父组件
        to_attrsList(attrs,value){
            this.$emit("getAttrs",attrs,value)
        }
    },
}
</script>

<style scoped lang='less'>
      .selector{
        border: 1px solid #ddd;
        margin-top: 20px;
        line-height: 35px;
        background: #f1f1f1;
        &>dl:first-child{
            border-top: 0;
        }
        dl{
            border-top: 1px solid #ddd;
            width: 100%;
            dt{
                text-align: right;
                box-sizing: border-box;
                padding-right: 10px;
                width: 100px;
                float: left;
                
            }
            dd{
                background: #fff;
                display: flex;
                a{
                    padding: 0 10px;
                    cursor: pointer;
                }
                .logo{
                    a{
                        cursor: pointer;
                        padding: 0px;
                    }
                        box-sizing: border-box;
                        width: 100%;
                        padding: 10px 10px 10px 10px;
                        display: flex;
                        justify-content: space-between;
                    ul{
                        overflow: hidden;
                        width: 955px;
                        margin-left: 6px;
                        border-left: 1px solid #e4e4e4;
                        border-top: 0;
                        border-right: 0;
                        display: flex;
                        flex-wrap: wrap;
                        li{
                            border-top: 1px solid #e4e4e4;
                            width: 105px;
                            height: 52px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            text-align: center;
                            line-height: 52px;
                            border-right: 1px solid #e4e4e4;
                            border-bottom: 1px solid #e4e4e4;
                        }
                    }
                    .logo_a{
                        line-height: normal;
                        &>a:first-child{
                            background: #fff;
                            border: 1px solid #d5d5d5;
                            padding: 0 10px;
                            margin-right: 10px;
                            line-height: 18px;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
    }
</style>